<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">




    <title>传智旅游后台管理系统</title>
    <meta name="description" content="传智旅游后台管理系统">
    <meta name="keywords" content="传智旅游后台管理系统">




    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <!-- Font Awesome -->
    <!-- Ionicons -->
    <!-- iCheck -->
    <!-- Morris chart -->
    <!-- jvectormap -->
    <!-- Date Picker -->
    <!-- Daterange picker -->
    <!-- Bootstrap time Picker -->
    <!--<link rel="stylesheet" href="../../../plugins/timepicker/bootstrap-timepicker.min.css">-->
    <!-- bootstrap wysihtml5 - text editor -->
    <!--数据表格-->
    <!-- 表格树 -->
    <!-- select2 -->
    <!-- Bootstrap Color Picker -->
    <!-- bootstrap wysihtml5 - text editor -->
    <!--bootstrap-markdown-->
    <!-- Theme style -->
    <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
    <!-- Ion Slider -->
    <!-- ion slider Nice -->
    <!-- bootstrap slider -->
    <!-- bootstrap-datetimepicker -->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->








    <!-- jQuery 2.2.3 -->
    <!-- jQuery UI 1.11.4 -->
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <!-- Bootstrap 3.3.6 -->
    <!-- Morris.js charts -->
    <!-- Sparkline -->
    <!-- jvectormap -->
    <!-- jQuery Knob Chart -->
    <!-- daterangepicker -->
    <!-- datepicker -->
    <!-- Bootstrap WYSIHTML5 -->
    <!-- Slimscroll -->
    <!-- FastClick -->
    <!-- iCheck -->
    <!-- AdminLTE App -->
    <!-- 表格树 -->
    <!-- select2 -->
    <!-- bootstrap color picker -->
    <!-- bootstrap time picker -->
    <!--<script src="../../../plugins/timepicker/bootstrap-timepicker.min.js"></script>-->
    <!-- Bootstrap WYSIHTML5 -->
    <!--bootstrap-markdown-->
    <!-- CK Editor -->
    <!-- InputMask -->
    <!-- DataTables -->
    <!-- ChartJS 1.0.1 -->
    <!-- FLOT CHARTS -->
    <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
    <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
    <!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
    <!-- jQuery Knob -->
    <!-- Sparkline -->
    <!-- Morris.js charts -->
    <!-- Ion Slider -->
    <!-- Bootstrap slider -->
    <!-- bootstrap-datetimepicker -->
    <!-- 页面meta /-->

    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="../plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="../plugins/morris/morris.css">
    <link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="../plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="../plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="../plugins/select2/select2.css">
    <link rel="stylesheet" href="../plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="../plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="../plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="../plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
    <link type="text/css" href="/css/loading.css" rel="stylesheet" />
</head>

<body class="hold-transition skin-purple sidebar-mini">

    <div class="wrapper">

        <!-- 页面头部 -->
        <header class="main-header">


            <!-- Logo -->
            <a href="all-admin-index.html" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>传智</b></span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>传智旅游</b>后台管理</span>
            </a>


            <!-- Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only">Toggle navigation</span>
                </a>

                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="../img/user2-160x160.jpg" class="user-image" alt="User Image">
                                <span class="hidden-xs">快乐</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- User image -->
                                <li class="user-header">
                                    <img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image">

                                    <p>
                                        快乐 - 系统管理眼
                                        <small>最后登录 11:20AM</small>
                                    </p>
                                </li>
                                <!-- Menu Body
                                <li class="user-body">
                                    <div class="row">
                                        <div class="col-xs-4 text-center">
                                            <a href="#">Followers</a>
                                        </div>
                                        <div class="col-xs-4 text-center">
                                            <a href="#">Sales</a>
                                        </div>
                                        <div class="col-xs-4 text-center">
                                            <a href="#">Friends</a>
                                        </div>
                                    </div>
                                </li>-->
                                <!-- Menu Footer-->
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a href="#" class="btn btn-default btn-flat">修改密码</a>
                                    </div>
                                    <div class="pull-right">
                                        <a href="/loginOut.action" class="btn btn-default btn-flat">注销</a>
                                    </div>
                                </li>
                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>
        </header>
        <!-- 页面头部 /-->

        <!-- 导航侧栏 -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- Sidebar user panel -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    </div>
                    <div class="pull-left info">
                        <p>快乐</p>
                        <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                    </div>
                </div>
                <!-- search form -->
                <!--<form action="#" method="get" class="sidebar-form">
                    <div class="input-group">
                        <input type="text" name="q" class="form-control" placeholder="搜索...">
                        <span class="input-group-btn">
                        <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                        </button>
                      </span>
                    </div>
                </form>-->
                <!-- /.search form -->


                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu">
                    <li class="header">菜单</li>

                    <li id="admin-index"><a href="/pages/admin-homePage.html"><i class="fa fa-dashboard"></i>
                        <span>首页</span></a></li>

                    <!-- 菜单 -->

                    <li class="treeview">
                        <a href="#">
                            <i class="glyphicon glyphicon-th"></i> <span>系统管理</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">

                            <li id="admin-login">
                                <a href="#">
                                    <i class="fa fa-folder"></i> <span>权限管理</span>
                                    <span class="pull-right-container">
                                        <i class="fa fa-angle-left pull-right"></i>
                                    </span>
                                </a>
                                <ul class="treeview-menu">

                                    <li id="admin-user">
                                        <a href="/pages/admin-userAdmin.html">
                                            <i class="glyphicon glyphicon-user"></i> 用户管理
                                        </a>
                                    </li>

                                    <li id="admin-role">
                                        <a href="/pages/admin-roleAdmin.html">
                                            <i class="glyphicon glyphicon-indent-left"></i> 角色管理
                                        </a>
                                    </li>
                                    <li id="admin-resource">
                                        <a href="/pages/admin-resources.html">
                                            <i class="glyphicon glyphicon-saved"></i> 资源权限
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li id="admin-register">
                                <a href="/pages/admin-logAdmin.html">
                                    <i class="glyphicon glyphicon-list-alt"></i> 日志管理
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-pie-chart"></i> <span>产品管理</span>
                            <span class="pull-right-container">
                                <i class="fa fa-angle-left pull-right"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">

                            <li id="charts-chartjs">
                                <a href="/pages/admin-routeInfo.html">
                                    <i class="fa fa-search"></i> 产品信息
                                </a>
                            </li>

                            <li id="charts-morris">
                                <a href="/pages/admin-addRoute.html">
                                    <i class="fa  fa-plus"></i> 添加产品
                                </a>
                            </li>

                        </ul>
                    </li>

                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>
        <!-- 导航侧栏 /-->

        <!-- 内容区域 -->
        <div class="content-wrapper">
            <!-- 内容头部 -->
            <section class="content-header">
                <h1>
                    产品管理
                    <small>产品信息</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="admin-homePage.html"><i class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a href="#">产品管理</a></li>
                    <li class="active">全部产品</li>
                </ol>
            </section>
            <!-- 内容头部 /-->

            <!-- 正文区域 -->
            <section class="content">

                <!-- .box-body -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">旅游产品信息</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="添加产品"
                                            onclick='location.href="admin-addRoute.html"'><i
                                                class="fa fa-file-o"></i> 添加产品</button>
                                        <button type="button"  id="delProductBtn" class="btn btn-default" title="批量删除"><i class="fa fa-trash-o"></i> 批量删除</button>
                                        <button type="button" class="btn btn-default" title="刷"
                                            onclick="window.location.reload();"><i class="fa fa-refresh"></i>
                                            刷新</button>
                                    </div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
                                    <input type="text" class="form-control input-sm"  id="search" placeholder="搜索">
                                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                                </div>
                            </div>
                            <!--工具栏/-->

                            <!--数据列表-->
                            <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                    <tr>
                                        <th class="" style="padding-right:0px;">
                                            <input id="selall" type="checkbox" class="icheckbox_square-blue">
                                        </th>

                                        <th class="sorting">产品编号</th>
                                        <th class="sorting">产品名称</th>
                                        <th class="sorting">价格</th>
                                        <th class="sorting">开始时间</th>
                                        <th class="sorting">截至时间</th>
                                        <th class="sorting">产品描述</th>
                                        <th class="sorting">其他信息</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>


<!--

                                    <tr>
                                        <td><input name="ids" type="checkbox"></td>

                                        <td>71837383</td>
                                        <td>北京一日游</td>
                                        <td>￥1000</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>哎 就是玩</td>
                                        <td>没啥可说的</td>

                                        <td class="text-center">
                                            <button type="button" class="btn bg-olive btn-xs"
                                                onclick='window.confirm("确认删除本条产品信息吗?")'>删除</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                onclick='window.confirm("确认删除本条产品信息吗?")'>详情</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                onclick='window.confirm("确认删除本条产品信息吗?")'>编辑</button>
                                        </td>
                                    </tr>


                                    <tr>
                                        <td><input name="ids" type="checkbox"></td>

                                        <td>71837383</td>
                                        <td>北京一日游</td>
                                        <td>￥1000</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>哎 就是玩</td>
                                        <td>没啥可说的</td>

                                        <td class="text-center">
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>删除</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>详情</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>编辑</button>
                                        </td>
                                    </tr>


                                    <tr>
                                        <td><input name="ids" type="checkbox"></td>

                                        <td>71837383</td>
                                        <td>北京一日游</td>
                                        <td>￥1000</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>哎 就是玩</td>
                                        <td>没啥可说的</td>

                                        <td class="text-center">
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>删除</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>详情</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>编辑</button>
                                        </td>
                                    </tr>


                                    <tr>
                                        <td><input name="ids" type="checkbox"></td>

                                        <td>71837383</td>
                                        <td>北京一日游</td>
                                        <td>￥1000</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>哎 就是玩</td>
                                        <td>没啥可说的</td>

                                        <td class="text-center">
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>删除</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>详情</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>编辑</button>
                                        </td>
                                    </tr>


                                    <tr>
                                        <td><input name="ids" type="checkbox"></td>

                                        <td>71837383</td>
                                        <td>北京一日游</td>
                                        <td>￥1000</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>哎 就是玩</td>
                                        <td>没啥可说的</td>

                                        <td class="text-center">
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>删除</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>详情</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>编辑</button>
                                        </td>
                                    </tr>


                                    <tr>
                                        <td><input name="ids" type="checkbox"></td>

                                        <td>71837383</td>
                                        <td>北京一日游</td>
                                        <td>￥1000</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>哎 就是玩</td>
                                        <td>没啥可说的</td>

                                        <td class="text-center">
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>删除</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>详情</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>编辑</button>
                                        </td>
                                    </tr>


                                    <tr>
                                        <td><input name="ids" type="checkbox"></td>

                                        <td>71837383</td>
                                        <td>北京一日游</td>
                                        <td>￥1000</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>哎 就是玩</td>
                                        <td>没啥可说的</td>

                                        <td class="text-center">
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>删除</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>详情</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>编辑</button>
                                        </td>
                                    </tr>


                                    <tr>
                                        <td><input name="ids" type="checkbox"></td>

                                        <td>71837383</td>
                                        <td>北京一日游</td>
                                        <td>￥1000</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>2017-03-09 13:51:26</td>
                                        <td>哎 就是玩</td>
                                        <td>没啥可说的</td>

                                        <td class="text-center">
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>删除</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>详情</button>
                                            <button type="button" class="btn bg-olive btn-xs"
                                                    onclick='window.confirm("确认删除本条产品信息吗?")'>编辑</button>
                                        </td>
                                    </tr>
-->




                                </tbody>
                                <!--
                            <tfoot>
                            <tr>
                            <th>Rendering engine</th>
                            <th>Browser</th>
                            <th>Platform(s)</th>
                            <th>Engine version</th>
                            <th>CSS grade</th>
                            </tr>
                            </tfoot>-->
                            </table>
                            <!--数据列表/-->
                        </div>
                        <!-- 数据表格 /-->


                    </div>
                    <!-- .box-footer-->

                    <!-- /.box-footer-->
                    <div class="box-footer">
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <span id="productPageInfo">总共2 页，共14 条数据。 每页</span>
                                <select class="form-control" id="checkSize">
                                    <option value="2">2</option>
                                    <option value="5">5</option>
                                    <option selected="selected" value="10">10</option>
                                    <option value="15">15</option>
                                    <option value="20">20</option>
                                </select> 条
                            </div>
                        </div>

                        <div class="box-tools pull-right">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">首页</a>
                                </li>
                                <li><a href="#">上一页</a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">下一页</a></li>
                                <li>
                                    <a href="#" aria-label="Next">尾页</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </section>
            <!-- 正文区域 /-->
            <!-- 查看详情的模态框 -->
            <div class="modal fade" id="showInfoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="routeDetail">旅游产品详情</h4>
                        </div>
                        <div class="modal-body">
                            <table id="routeDataList" class="table table-bordered table-hover table-responsive table-striped">
                                <tr>
                                    <td>产品编号:</td>
                                </tr>
                                <tr>
                                    <td>产品名字:</td>
                                </tr>
                                <tr>
                                    <td>产品价格</td>
                                </tr>
                                <tr>
                                    <td>起始时间</td>
                                </tr>
                                <tr>
                                    <td>产品描述</td>
                                </tr>
                                <tr>
                                    <td>其他信息</td>
                                </tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--编辑数据的模态框-->
            <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="editInfo">编辑旅游产品信息</h4>
                        </div>
                        <div class="modal-body">
                            <div class="box box-info">
                                <!-- /.box-header -->
                                <!-- form start -->
                                <form class="form-horizontal">
                                    <div class="box-body">
                                        <div class="form-group">
                                            <label for="inputPid" class="col-sm-2 control-label">产品编号</label>
                                            <div class="col-sm-10">
                                                <input type="text" name="pId" hidden="hidden">
                                                <input type="text"  class="form-control" disabled="disabled" id="inputPid" placeholder="产品编号">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPname" class="col-sm-2 control-label">产品名字</label>
                                            <div class="col-sm-10">
                                                <input type="text" name="pName" class="form-control" id="inputPname" placeholder="产品名字">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPprice" class="col-sm-2 control-label">产品价格</label>
                                            <div class="col-sm-10">
                                                <input type="text" name="pPrice" class="form-control" id="inputPprice" placeholder="产品价格">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPstart" class="col-sm-2 control-label">起始日期</label>
                                            <div class="col-sm-10">
                                                <input type="date" name="pStart" class="form-control" id="inputPstart" placeholder="起始日期">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPend" class="col-sm-2 control-label">结束日期</label>
                                            <div class="col-sm-10">
                                                <input type="date" name="pEnd" class="form-control" id="inputPend" placeholder="结束日期">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPinfo" class="col-sm-2 control-label">产品信息</label>
                                            <div class="col-sm-10">
                                                <textarea rows="3" name="pInfo" class="form-control" id="inputPinfo" placeholder="产品信息"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPother" class="col-sm-2 control-label">其他信息</label>
                                            <div class="col-sm-10">
                                                <textarea rows="3" name="pOther" class="form-control" id="inputPother" placeholder="其他信息"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.box-body -->
                                    <div class="box-footer">
                                        <button type="submit" id="editProductBtn" class="btn btn-info pull-left">提交</button>
                                        <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>

                                    </div>
                                    <!-- /.box-footer -->
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--loading-->
        <div class="modal fade"  id="loading" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document" >
                <div class="modal-content " >
                    <!--<div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="load">加载中...</h4>
                    </div>-->
                    <div class="modal-body text-center">
                        <h5>加载中</h5>
                        <div class="sp sp-3balls" ></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容区域 /-->

        <!-- 底部导航 -->
        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                <b>Version</b> 1.0.8
            </div>
            <strong>Copyright &copy; 2014-2017 <a href="http://www.ytyouye.com/">优业科技</a>.</strong> All rightsreserved.
        </footer>
        <!-- 底部导航 /-->

    </div>


    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
    <script>
        $.widget.bridge('uibutton', $.ui.button);
    </script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/raphael/raphael-min.js"></script>
    <script src="../plugins/morris/morris.min.js"></script>
    <script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="../plugins/knob/jquery.knob.js"></script>
    <script src="../plugins/daterangepicker/moment.min.js"></script>
    <!--<script src="../plugins/daterangepicker/daterangepicker.js"></script>-->
    <script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
    <script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="../plugins/fastclick/fastclick.js"></script>
    <script src="../plugins/iCheck/icheck.min.js"></script>
    <script src="../plugins/adminLTE/js/app.min.js"></script>
    <script src="../plugins/treeTable/jquery.treetable.js"></script>
    <script src="../plugins/select2/select2.full.min.js"></script>
    <script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
    <script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
    <script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
    <script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
    <script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
    <script src="../plugins/ckeditor/ckeditor.js"></script>
    <script src="../plugins/input-mask/jquery.inputmask.js"></script>
    <script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
    <!--<script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>-->
    <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script src="../plugins/chartjs/Chart.min.js"></script>
    <script src="../plugins/flot/jquery.flot.min.js"></script>
    <script src="../plugins/flot/jquery.flot.resize.min.js"></script>
    <script src="../plugins/flot/jquery.flot.pie.min.js"></script>
    <script src="../plugins/flot/jquery.flot.categories.min.js"></script>
    <script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
    <script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
    <script type="text/javascript">



        /*<td className="text-center">
            <button type="button" className="btn bg-olive btn-xs">删除</button>
            <button type="button" className="btn bg-olive btn-xs"
                    onClick='window.confirm("确认删除本条产品信息吗?")'>详情
            </button>
            <button type="button" className="btn bg-olive btn-xs"
                    onClick='window.confirm("确认删除本条产品信息吗?")'>编辑
            </button>
        </td>*/



        $(document).ready(function () {
            // 选择框
            $(".select2").select2();

            // WYSIHTML5编辑器
            $(".textarea").wysihtml5({
                locale: 'zh-CN'
            });
        });


        // 设置激活菜单
        function setSidebarActive(tagUri) {
            var liObj = $("#" + tagUri);
            if (liObj.length > 0) {
                liObj.parent().parent().addClass("active");
                liObj.addClass("active");
            }
        }


        $(document).ready(function () {

            // 激活导航位置
            setSidebarActive("charts-chartjs");

            // 列表按钮 
            $("#dataList td input[type='checkbox']").iCheck({
                checkboxClass: 'icheckbox_square-blue',
                increaseArea: '20%'
            });
            // 全选操作 
            $("#selall").click(function () {
                var clicks = $(this).is(':checked');
                if (!clicks) {
                    $("#dataList td input[type='checkbox']").iCheck("uncheck");
                } else {
                    $("#dataList td input[type='checkbox']").iCheck("check");
                }
                $(this).data("clicks", !clicks);
            });
        });
        //检索旅游产品信息
        var getAllInfo = function (num,size){
            $('#loading').modal('show');
            $.get("/queryProduct.action",{num,size},function(data){
                $('#loading').modal('hide');
                //console.log(123);
                console.log(data); // lastPage  总页数   total  数据总条数
                //<span id="productPageInfo">总共2 页，共14 条数据。 每页</span>
                $('#productPageInfo').text(`总共 ${data.lastPage} 页，共 ${data.total} 条数据。 每页`);
                //渲染当前页数据
                showProductData(data.list);
                showPages(data);
            });
        };


        var showProductData = function(data){
            //渲染数据到页面
            $('#dataList>tbody').html("");
            //console.log(typeof data)
            for(product in data){
                let pro = data[product];
                let tr = $("<tr></tr>");
                tr.append(`<td><input type="checkbox" class="icheckbox_square-blue" value="${pro.pId}" name="ids"></td>`);
                tr.append(`<td>${pro.pId} <span hidden="hidden">${pro.pId}</span></td>`);
                tr.append(`<td>${pro.pName}</td>`);
                tr.append(`<td>${pro.pPrice}</td>`);
                tr.append(`<td>${pro.pStart}</td>`);
                tr.append(`<td>${pro.pEnd}</td>`);
                let showInfo = pro.pInfo.substr(0,10);
                tr.append(`<td>${showInfo}...</td>`);
                let showOther = pro.pOther.substr(0,10);
                tr.append(`<td>${showOther}...</td>`);
                let td  = $("<td></td>");
                td.append("<button type=\"button\"  class='btn bg-olive btn-xs delBtn'>删除</button> ");
                td.append("<button type=\"button\"  class=\"btn bg-olive btn-xs infoBtn\">详情</button> ");
                td.append("<button type=\"button\" class=\"btn bg-olive btn-xs editBtn\">编辑</button> ")
                td.appendTo(tr);
                tr.appendTo($('#dataList>tbody'));
            }
        }

        var showPages = function (data){
            //清空所有页码
            let pagination = $('.pagination');
            pagination.html("");

            $(`<li><a href="javascript:getAllInfo(1,${data.pageSize})" aria-label="Previous">首页</a></li>`).appendTo(pagination);
            let pre = $(` <li><a href="javascript:getAllInfo(${data.prePage},${data.pageSize})">上一页</a></li>`);
            if(data.pageNum==1)
                pre.addClass('disabled');
            pre.appendTo(pagination);
            for(let j = 1;j<=data.lastPage;j++){
                if(data.pageNum == j)
                    $(`<li class="active"><a href="javascript:getAllInfo(${j},${data.pageSize})">${j}</a></li>`).appendTo(pagination);
                else
                    $(`<li><a href="javascript:getAllInfo(${j},${data.pageSize})">${j}</a></li>`).appendTo(pagination);
            }
            let next = $(`<li><a href="javascript:getAllInfo(${data.nextPage},${data.pageSize})">下一页</a></li>`);
            if(data.pageNum == data.lastPage) {
                next.addClass('disabled');
                next.find('a').attr('href',"#");
            }
            next.appendTo(pagination);
            $(`<li><a href="javascript:getAllInfo(${data.lastPage},${data.pageSize})" aria-label="Next">尾页</a></li>`).appendTo(pagination);
        }
        $('#checkSize').change(function(){
            var size = $(this).val();
            getAllInfo(1,size);
        });
        //删除旅游产品信息
        //对动态填充的元素绑定css样式
        $('#dataList').on('click','.delBtn',function(){
            //确认框  提高操作人员的容错率
            if(confirm('确认要删除本条旅游产品信息吗?')){
                var id = $(this).parent().parent().find('span').text();
                //console.log(id);
                $.post("/deleteOne.action",{"id":id},function(response){
                    if(response==1){
                        alert("删除成功~~");
                        location.reload();
                    }else{
                        alert("删除失败~~")
                    }
                })
            }
        });
        //编辑  使用带有输入框的模态框进行数据展示
        $('#dataList').on('click','.editBtn',function(){
            let id = $(this).parent().parent().find('span').text();
            $('#editModal').modal('show');
            // 获取数据 填充到输入框中
            $.get("/queryOne.action",{id},function(response){
                console.log(response);
                $('input[name=pId]').val(response.pId);
                $('#inputPid').val(response.pId);
                $('#inputPinfo').val(response.pInfo);
                $('#inputPname').val(response.pName);
                $('#inputPstart').val(response.pStart);
                $('#inputPend').val(response.pEnd);
                $('#inputPother').val(response.pOther);
                $('#inputPprice').val(response.pPrice);
            },"json")
        });
        // 编辑 将编辑好的信息 提交到数据库
        $("#editProductBtn").click(function(){
            //获取表单信息
            let formData = $('.form-horizontal').serialize();
            //console.log(formData);
            // 发送异步请求 修改信息
            $.post('/editProduct.action',formData,function(response){
                if(response == 1){
                    alert('修改成功~~~');
                    getAllInfo();
                }else{
                    alert('修改失败~~请查看日志信息~~');
                }
            });
        });
        //查看详情  使用没有输入框的模态框 进行数据展示
        $('#dataList').on('click','.infoBtn',function(){
            let id = $(this).parent().parent().find('span').text();
            $('#showInfoModal').modal('show');
            let table = $('#routeDataList');
            table.html("");
            $.post("/queryOne.action",{"id":id},function(response){
                //console.log(123);
                $(`<tr class="active"><td>产品编号 : ${response.pId}</td></tr>`).appendTo(table);
                $(`<tr class="info"><td>产品名字 : ${response.pName}</td></tr>`).appendTo(table);
                $(`<tr class="success"><td>产品价格 : ${response.pPrice}</td></tr>`).appendTo(table);
                $(`<tr class="warning"><td>起始日期 : ${response.pStart}</td></tr>`).appendTo(table);
                $(`<tr class="danger"><td>截至日期 : ${response.pEnd}</td></tr>`).appendTo(table);
                $(`<tr class="info"><td>产品信息 : ${response.pInfo}</td></tr>`).appendTo(table);
                $(`<tr class="active"><td>其他信息 : ${response.pOther}</td></tr>`).appendTo(table);
            })
        });
        //搜素
        $('#search').keyup(function(event){
            if(event.keyCode==13){
                //alert(123);
                //console.log($(this).val());
                $.get("/searchProducts.action",{"content":$(this).val()},function(data){
                    console.log(data);
                    if(data.length!=0){
                        showProductData(data);
                    }else{
                        $('#dataList>tbody').html("");
                        alert('暂无相关产品信息~');
                    }
                });
            }
        });
        //批量删除
        $('#delProductBtn').click(function(){
            //获取选择的用户的id
            var ids = $('input[name=ids]').serialize();
            var idsData = ids.split("&");
            if(idsData == 0){
                alert("请选择需要删除的旅游产品");
            }else{
                if(confirm('您确定要删除这些旅游产品吗?')){
                    $.post("/deleteProducts.action",ids,function(response){
                        if(response>0){
                            alert("删除成功");
                            location.reload();
                        }else{
                            alert("删除失败~请查看日志信息~");
                        }
                    });
                }
            }
        });
        $(function(){
            getAllInfo();
        })
    </script>
</body>

</html>